<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../../static/css/register.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
</head>
<body>
<div id="bigBox">
    <h1>Register</h1>
    <div class="form-control">
        <form>
            <div class="inputText">
                <input type="text" id="userName" placeholder="请输入用户名"/>
            </div>

            <div class="inputText">
                <input type="password" id="password1"  placeholder="请输入密码"/>
            </div>

            <div class="inputText">
                <input type="password" id="password2"  placeholder="请确认密码"/>
            </div>

            <span id="sp" hidden="hidden"><p>两次密码不一致，请重新输入！</p></span><br>
            <input type="button" class="inputSubmit" id="register" value="点击注册"/>
        </form>
    </div>
</div>


<script type="text/javascript">
    $(function (){
        $("#register").bind("click", function (){
            login();
        })
    })
    function login() {
        //获取页面输入框的值，包装到 user js 对象中
        let user = {};
        user.userName = $("#userName").val();
        user.password = $("#password1").val();
        let psw1 =$("#password2").val();

        if (user.userName == "" || user.password == "" || psw1 == ""){
            alert("请输入用户名和密码！");
            return;
        }
        if(user.password != psw1){
           $("#sp").toggle();
           $("#password1").val("");
           $("#password2").val("");
           steTimeout(function (){$("#sp").toggle()}, 2000);
           //  alert("输入两次密码不一致，请重新输入！");
            return;
        }
        //调用 ajax 请求后台的 login 控制器， 处理响应结果
        $.ajax({
            url:"/api/register",
            type:"post",
            contentType:"application/json",
            data:JSON.stringify(user),
            success:function (result){
                if(result.status == 200){
                    alert("注册完成！点击跳转到登录界面")
                    window.location.href = "/login";
                }else{
                    alert(result.message);
                }
            },
            error:function(data){
                alert(data);
            }
        });
    }
</script>
</body>
</html>
